<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>PDR 确定</span>
          <el-button class="button" text @click.stop="openDetail">{{ showDetail ? '收起' : '查看详情' }}</el-button>
        </div>
      </template>
      <div class="text item">
        <img class="small-icon" src="../../../public/PDR.png" alt="PDR" />
        <el-button :icon="Refresh" circle @click="getPdrValue" />
        <p v-if="pdr != null">当前PDR：{{pdr.pdr_data.pdr}}</p>
        <p v-else>尚未评议</p>
      </div>
    </el-card>
    <transition name="expand">
      <div v-if="showDetail" class="detail-content">
        <h2>PDR 确定的详细信息</h2>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="section">
              <h3>选择基准来源</h3>
              <el-radio-group v-model="historyLabel" @change="handleRadioChange">
                <el-radio label="0">行业基准</el-radio>
                <el-radio label="1">历史数据</el-radio>
              </el-radio-group>
            </div>
            <div v-if="history" class="section">
              <h3>数据上传</h3>
              <el-button class="action-button" type="primary" @click="handleImport">导入</el-button>
              <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none" accept=".xlsx,.xls" />
            </div>
            <div class="section current-pdr">
              <h3>当前PDR取值</h3>
              <p>{{pdr.pdr_data.pdr}}</p>
            </div>
            <el-button @click="uploadPDR" class="save-button" type="primary" size="large">保存</el-button>
          </el-col>
          <el-col :span="12">
            <div class="image-placeholder">
              <img :src="imagePath" alt="PDR 确定" />
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-button @click="closeDetail" class="close-button" type="primary" size="large">关闭</el-button>
      </div>
    </transition>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import { currentProjectTask } from './Variables/costVariables';
import { PDR, setPDRHistory, setPDRHistoryPath } from './Variables/pdrVariables';
import { uploadFile, getPdrInfo, updatePdrInfo } from '../../api/Cost/pdrApi';
import { ElMessage } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { getProcess, updateProcessHistory } from '../../api/Cost/costApi';

const showDetail = ref(false);
const history = ref();
const historyLabel = ref();
const uploadList = ref([]);
const pdr = ref();
const imagePath = "../../public/cost1.png";
const files = ref();
const processSet = ref({
  pdr_process: 0,
  rdf_process: 0,
  swf_process: 0,
  rsk_process: 0,
  cost_process: 0,
  total_process: 0
});
const task = ref();

const getPdrValue = async () => {
  const res = await getPdrInfo(currentProjectTask.projectId);
  pdr.value = res;
};
getPdrValue();

const handleRadioChange = (value: string) => {
  history.value = value === '1';
  setPDRHistory(history.value);
};

const fileInput = ref<HTMLInputElement | null>(null);

function handleImport() {
  fileInput.value?.click();
}

const handleFileUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];

  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    const url = await uploadFile(formData);
    ElMessage({
      message: `${file.name} 上传成功`,
      type: 'success',
    });
    setPDRHistoryPath(url);
  }
};

const fetchProcess = async () => {
  const res = await getProcess(currentProjectTask.projectId);
  processSet.value = res.data;
  task.value = res.task;
  updateProcessHistory(task.value);
};

const uploadPDR = async() => {
  await updatePdrInfo({
    projectId: currentProjectTask.projectId,
    history: PDR.history,
    historyPath: PDR.historyPath,
  });
  await fetchProcess();
  await getPdrValue();
  ElMessage({
      message: '保存成功',
      type: 'success',
    });
};

const openDetail = () => {
  showDetail.value = true;
};

const closeDetail = () => {
  showDetail.value = false;
};
</script>

<style scoped>
.box-card {
  background-color: #dcf2fb;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  height: 260px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
}

.text {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-top: 30px;
  color: black;
  
}

.small-icon {
  width: 160px;
  height: 82px;
  margin-right: 11px;
}

.detail-content {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: #fff;
  z-index: 1000;
  padding: 20px;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: scale(1);
  opacity: 1;
  transition: all 0.5s ease;
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.5s ease;
}

.expand-enter,
.expand-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

.section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.current-pdr {
  height: 200px;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
}

.image-placeholder img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}

.save-button,
.close-button {
  margin-top: 20px;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.el-divider {
  margin: 20px 0;
}
</style>


